<template>
	<view class="pagess">
		<view class="back flex_c">
			<image src="../../static/icon/left_jt.png" mode="aspectFill" @click="goBack"></image>
			<!-- <text>小福竞猜</text> -->
		</view>
		<view class="poster">
			<image class="poster_img1" :src="infoDetail.bg_image" mode="aspectFill"></image>
			<!-- <image class="poster_img1" src="../../static/image/guess1.png" mode="aspectFill"></image> -->
			<image class="poster_img2" src="../../static/image/guess_tip.png" @click="boxShow4 = true"
				mode="aspectFill"></image>
			<view class="open_prize flex_Z">
				<view class="prize_number flex_ld_b" v-if="!openPrizeShow">
					<image :src="notImg" mode="aspectFill"></image>
					<image :src="notImg" mode="aspectFill"></image>
					<image :src="notImg" mode="aspectFill"></image>
				</view>
				<view class="prize_number flex_ld_b" v-else>
					<view class="open_prize_state">
						<text class="open_number">{{infoDetail.code1}}</text>
						<image :src="openImg" mode="aspectFill"></image>
					</view>
					<view class="open_prize_state">
						<text class="open_number">{{infoDetail.code2}}</text>
						<image :src="openImg" mode="aspectFill"></image>
					</view>
					<view class="open_prize_state">
						<text class="open_number">{{infoDetail.code3}}</text>
						<image :src="openImg" mode="aspectFill"></image>
					</view>
				</view>
				<view class="progress">
					<view class="progress_box">
						<u-line-progress :percentage="sumNumber" height="15" inactiveColor="transparent"></u-line-progress>
					</view>
				</view>
				<view class="progress_state flex_ZC">
					<text class="f24 c5">{{infoDetail.exchange_number}}/{{infoDetail.stock}}</text>
					<text class="f28">开奖进度：{{infoDetail.status == 0 ?'未开始':infoDetail.status == 1 ?'进行中':infoDetail.status == 2 ?'待开奖':'已结束'}}</text>
					
					<image v-if="infoDetail.status == 0" class="btn_jc" src="../../static/image/guess_btn.png" @click="notStarted" mode="aspectFill"></image>
					<image v-if="infoDetail.status == 1" :class="btnClass?'effect':'btn_jc'" src="../../static/image/guess_btn.png" @click="isImmediately" mode="aspectFill"></image>
					<image v-if="infoDetail.status == 2" class="btn_jc" src="../../static/image/guess_end.png" @click="boxShow2 = true" mode="aspectFill"></image>
					<view v-if="infoDetail.status == 3">
						<image v-if="userDetail.is_winning" class="btn_jc" src="../../static/image/guess_win.png" @click="goReceive" mode="aspectFill"></image>
						<image v-else class="btn_jc" src="../../static/image/guess_no.png" mode="aspectFill"  @click="boxShow2 = true"></image>
					</view>
					
					<image class="what_card" src="../../static/image/guess_tip2.png" mode="aspectFill" @click="boxShow5 = true"></image>
				</view>
			</view>
		</view>
		<view class="card_number flex_c">
			<text>我的竞猜卡数量是：{{userDetail.pending_count}}</text>
			<image src="../../static/image/guess_tip_h.png" mode="aspectFill"></image>
		</view>
		<view class="lottery_code flex_dq"  v-if="lotteryCode.length>0">
			<view class="lottery_code_box ">
				<view class="lottery_box flex_c" v-for="(item,index) in interceptList" :key="index">
					<view class="winning" v-if="item.status == 1">
						<text class="win_txt">{{item.winning_number}}</text>
						<image src="../../static/image/guess_jp.png" mode="aspectFill"></image>
					</view>
					<text v-else>{{item.winning_number}}</text>
				</view>
				<view class="lottery_box flex_c" v-if="lotteryCode.length >=11" @click="isMoreShow = true">
					<text>更多</text>
				</view>

			</view>
		</view>
		<view class="this_prize ">
			<image src="../../static/image/guess_7.png" mode="aspectFill"></image>
			<view class="this_prize_box " v-for="(item,index) in prizesList" :key="item.id">
				<view class="prize_box flex_dq">
					<image :src="item.cover" mode="aspectFill"></image>
					<view class="prize_info flex_Z">
						<view class="grade flex_dq">
							<text>{{item.name}}</text>
							<image src="../../static/image/guess_h.png" mode="aspectFill"></image>
						</view>
						<text class="f28 c5">{{item.introduction}}</text>
						<view class="grade_value flex_dq">
							<text>价值</text>
							<text>{{item.price}}</text>
							<text>元</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="rules flex_dq">
			<image src="../../static/image/hdgz.png" mode="aspectFill"></image>
			<view class="rules_box " v-if="infoDetail.introduction">
				<rich-text :nodes="infoDetail.introduction"></rich-text>
			</view>
		</view>


		<u-popup :show="boxShow1" mode="center" @close="boxShow1 = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f32 c3">消耗一张竞猜卡，获得一个抽奖码</text>
				<view class="user_card flex_dq">
					<text class="f26 c6">当前竞猜卡持有：</text>
					<text class="user_number">{{userDetail.pending_count}}</text>
					<text class="f26 c6">张</text>
				</view>
				<view class="btn_xz flex_ld_b">
					<text @click="boxShow1 = false">取消</text>
					<text @click="isLuckDraw">确认</text>
				</view>
			</view>
		</u-popup>
		<u-popup :show="boxShow2" mode="center" @close="boxShow2 = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f32 c3">本期竞猜已结束，请关注开奖结果和下期活动。</text>
				<view class="prompt_ntm flex_c" @click="boxShow2 = false">
					<text>确认</text>
				</view>
			</view>
		</u-popup>

		<u-popup :show="boxShow3" mode="center" @close="boxShow3 = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f32 c3">您本次获的抽奖码为</text>
				<view class="prize_number bianju flex_ld">
					<view class="open_prize_state">
						<text class="open_number">{{codeInfo.code1}}</text>
						<image :src="openImg" mode="aspectFill"></image>
					</view>
					<view class="open_prize_state">
						<text class="open_number">{{codeInfo.code2}}</text>
						<image :src="openImg" mode="aspectFill"></image>
					</view>
					<view class="open_prize_state">
						<text class="open_number">{{codeInfo.code3}}</text>
						<image :src="openImg" mode="aspectFill"></image>
					</view>
				</view>
				<view class="prompt_ntm flex_c" @click="boxShow3 = false">
					<text>确认</text>
				</view>
			</view>
		</u-popup>

		<u-popup :show="boxShow4 " mode="center" @close="boxShow4 = false " closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f32 c3">提示</text>
				<view class="card_tips flex_Z">
					<rich-text class="tishi" :nodes="infoDetail.guessing_card_instruction"></rich-text>
				</view>
				<view class="prompt_ntm flex_c" @click="boxShow4 = false">
					<text>确认</text>
				</view>
			</view>
		</u-popup>
		<u-popup :show="boxShow5 " mode="center" @close="boxShow5 = false " closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f32 c3">提示</text>
				<view class="card_tips flex_Z">
					<rich-text class="tishi" :nodes="infoDetail.guessing_card_instruction"></rich-text>
				</view>
				<view class="prompt_ntm flex_c" @click="boxShow5 = false">
					<text>确认</text>
				</view>
			</view>
		</u-popup>
		<u-popup :show="isMoreShow " mode="bottom" @close="isMoreShow = false " closeable bgColor="transparent">
			<view class="my_code flex_ZC">
				<text class="f36 c3">我的抽奖码</text>
				<view class="mycode_list">
					<view class="lottery_box flex_c" v-for="(item,index) in lotteryCode" :key="index">
						<view class="winning" v-if="item.status == 1">
							<text class="win_txt">{{item.winning_number}}</text>
							<image src="../../static/image/guess_jp.png" mode="aspectFill"></image>
						</view>
						<text v-else>{{item.winning_number}}</text>
					</view>
				</view>
				<view class="prompt_ntm2 flex_c" @click="isMoreShow = false">
					<text>确认</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {  
		activityDetails,
		myGuessing,
		luckDraw
	} from '../../api/guessing.js'
	export default {
		data() {
			return {
				ids: '',
				sumNumber: '0', //比例
				notImg: '../../static/image/guess3.png',
				openImg: '../../static/image/guess2.png',
				openPrizeShow: false, //开奖状态
				boxShow1: false, //开奖弹窗1
				boxShow2: false, //开奖结束弹窗
				boxShow3: false, //获取抽奖码弹窗
				boxShow4: false, //提示弹窗
				boxShow5: false, //提示弹窗
				isMoreShow: false, //更多抽奖码
				userDetail: {}, //用户竞猜信息
				infoDetail: {}, //活动详情
				codeInfo: {}, //获取的抽奖码
				prizesList: [], //奖品
				interceptList: [],//截取的列表
				lotteryCode: [],//总抽奖码
				btnClass:false
			}
		},
		onLoad(e) {
			console.log(e);
			this.ids = e.id
			this.initDetails()
			this.myCodeList()
		},
		methods: {
			// 详情
			initDetails() {
				activityDetails({
					id: this.ids
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						let number = 100 / res.data.stock
						let allNumber = number * res.data.exchange_number
						this.sumNumber = allNumber.toFixed(2)
						console.log('动态计算比例',this.sumNumber);
						this.infoDetail = res.data
						this.prizesList = res.data.prizes
						if (this.infoDetail.status == 3) {
							this.openPrizeShow = true
						}
					}
				})
			},
			// 详情
			myCodeList() {
				myGuessing({
					award_config_id: this.ids
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.userDetail = res.data
						this.lotteryCode = res.data.list
						console.log('总抽奖码次数', this.lotteryCode.length);
						
						let storageList = res.data.list;
						if (storageList.length >= 12) {
							this.interceptList = storageList.splice(0, 11)
							console.log(this.interceptList);
						}else{
							this.interceptList = res.data.list
						}
					}
				})
			},
			// 立即竞猜
			isLuckDraw() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.boxShow1 = false
				setTimeout(() => {
					luckDraw({
						award_config_id: this.ids
					}).then(res => {
						console.log(res);
						uni.hideLoading()
						if (res.code == 1) {
							// uni.$u.toast(res.msg);
							this.codeInfo = res.data
							this.boxShow3 = true
							this.initDetails()
							this.myCodeList()
						}
					})
				}, 1200)
			},

			//  判断竞猜状态
			isImmediately() {
				this.btnClass = true
				setTimeout(() => {
					this.btnClass = false
				}, 500)
				console.log(this.infoDetail.status);
				if(this.infoDetail.status == 2){
					this.boxShow2 = true
					return ;
				}
				this.boxShow1 = true
			},
			// 未开始
			notStarted(){
				uni.$u.toast('活动未开始!');
			},
			// 去领奖
			goReceive(){
				console.log(11111,'去领取',this.ids);
				uni.navigateTo({
					url:'/pagesMy/activityCenter/awardCeremony?id=' + this.ids
				})
			},
			goBack() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
		},
	}
</script>

<style scoped>
	page {
		background: #f1dcbc;
	}
	.pagess{
		background: #f1dcbc;
	}

	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}

	.back {
		position: fixed;
		top: 30rpx;
		/* #ifdef APP */
		top: 60rpx;
		/* #endif */
		left: 20rpx;
		width: 100%;
		height: 88rpx;
		z-index: 999;
	}

	.back>text {
		font-size: 36rpx;
		color: #333333;
	}

	.back>image {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 60rpx;
		height: 60rpx;
	}

	.poster {
		position: relative;
		width: 100%;
		height: 1060rpx;
	}

	.poster_img1 {
		width: 100%;
		height: 1060rpx;
	}

	.poster_img2 {
		position: absolute;
		top: 264rpx;
		left: 0;
		width: 56rpx;
		height: 244rpx;
	}

	.open_prize {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 690rpx;
		height: 450rpx;
	}

	.open_prize_state {
		position: relative;
	}

	.open_number {
		position: absolute;
		top: 50rpx;
		left: 46rpx;
		font-size: 80rpx;
		color: #7F6A4D;
		font-weight: 700;
		z-index: 8;
		font-family: 'iconfont';
	}

	.open_prize_state>image {
		width: 140rpx;
		height: 180rpx;
		z-index: 3;
	}

	.prize_number {
		margin-top: 20rpx;
	}

	.prize_number>image {
		width: 140rpx;
		height: 180rpx;
	}

	.bianju {
		margin: 50rpx 0 0;
	}

	.progress {
		width: 530rpx;
		margin: 20rpx auto 10rpx;
	}

	.progress_box {
		position: relative;
		padding: 8rpx;
		border-radius: 40rpx;
		border: 1rpx solid #AB8E68;
		z-index: 1;
	}

	.progress_txt {
		position: absolute;
		top: 0;
		right: 20rpx;
		font-size: 26rpx;
		color: #A68A64;
		z-index: 9;
	}

	.progress_state {
		position: relative;
		width: 100%;
	}

	.progress_state>text:nth-child(2) {
		color: #736045;
	}

	.btn_jc {
		width: 346rpx;
		height: 88rpx;
		margin-top: 16rpx;
	}
	.effect {
		width: 346rpx;
		height: 88rpx;
		margin-top: 16rpx;
		animation-name: zoom;
		animation-duration: 0.4s;
	}
	@keyframes zoom {
	    from {transform: scale(1)}
	    to {transform: scale(1.03)}
	
	}
	.what_card {
		position: absolute;
		bottom: 0;
		right: 32rpx;
		width: 102rpx;
		height: 94rpx;
	}

	.card_number {
		position: relative;
		width: 100%;
		height: 60rpx;
		/* background: pink; */
		font-size: 30rpx;
		color: #8C7554;
	}

	.card_number>image {
		position: absolute;
		top: 2rpx;
		right: -70rpx;
		width: 170rpx;
		height: 90rpx;
	}

	.lottery_code {
		width: 690rpx;
		height: 422rpx;
		margin: 30rpx auto;
		background-image: url("../../static/image/guess4.png");
		background-size: 100% 100%;
	}

	.lottery_code_box {
		display: flex;
		flex-wrap: wrap;
		width: 560rpx;
		min-height: 200rpx;
		border: 1rpx solid #A68A64;
		border-radius: 10rpx;
		margin: 70rpx auto 0;
	}

	.lottery_box {
		width: 116rpx;
		height: 50rpx;
		background: #C4AB87;
		border-radius: 40rpx;
		margin: 20rpx 12rpx;
		font-size: 32rpx;
		color: #FBEFD8;
	}

	.winning {
		position: relative;
	}

	.winning>image {
		width: 140rpx;
		height: 68rpx;
		transform: translateX(10rpx);
		z-index: 2;
	}

	.win_txt {
		position: absolute;
		top: 16rpx;
		left: 40rpx;
		font-size: 32rpx;
		color: #FBEFD8;
		z-index: 9;
	}


	.this_prize {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 690rpx;
		min-height: 320rpx;
		margin: 80rpx auto 30rpx;
		background-image: url("../../static/image/guess5.png");
		background-size: 100% 100%;
		padding: 50rpx 0 30rpx 0;
	}

	.this_prize>image {
		position: absolute;
		top: -40rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 380rpx;
		height: 88rpx;
	}

	.this_prize_box {
		display: flex;
		flex-wrap: wrap;
		width: 560rpx;
		min-height: 200rpx;
		border: 1rpx solid #A68A64;
		border-radius: 10rpx;
		margin: 10rpx auto;
	}

	.prize_box {
		padding: 0 24rpx;
	}

	.prize_box>image {
		width: 132rpx;
		height: 132rpx;
		margin-right: 20rpx;
		border-radius: 20rpx;
	}

	.prize_info {}

	.grade {
		font-size: 32rpx;
		color: #7F6A4D;
		font-weight: 700;
	}

	.grade>image {
		width: 35rpx;
		height: 46rpx;
		margin-left: 10rpx;
	}

	.grade_value>text:nth-child(1) {
		font-size: 28rpx;
		color: #A68A64;
	}

	.grade_value>text:nth-child(2) {
		font-size: 36rpx;
		color: #FF3A3A;
		font-weight: 700;
		margin: 0 10rpx;
	}

	.grade_value>text:nth-child(3) {
		font-size: 28rpx;
		color: #A68A64;
	}

	.rules {
		position: relative;
		width: 690rpx;
		min-height: 844rpx;
		margin: 80rpx auto 30rpx;
		background-image: url("../../static/image/guess7.png");
		background-size: 100% 100%;
		padding: 70rpx 0 50rpx;
		/* padding-top: 30rpx; */
	}
	.rules>image {
		position: absolute;
		top: -40rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 380rpx;
		height: 88rpx;
	}

	.rules_box {
		width: 620rpx;
		min-height: 700rpx;
		border-radius: 20rpx;
		font-size: 30rpx;
		color: #997F5C;
		margin: 0rpx auto ;
		border: 1rpx solid #C4AB87;
		background: #fbefd8;
		padding: 20rpx 24rpx;
		/* overflow: hidden; */
	}

	.prompt {
		width: 600rpx;
		background: #E0DDDA;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-bottom: 50rpx;
	}

	.prompt>text {
		width: 66%;
		margin-top: 70rpx;
		text-align: center;
		line-height: 50rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #666666;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.prompt_ntm {
		font-size: 36rpx;
		width: 480rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #A68A64;
		border-radius: 40rpx;
		margin-top: 40rpx;
		color: #ffffff;
	}

	.user_card {
		margin: 30rpx 0;
	}

	.user_number {
		font-size: 28rpx;
		color: #FF3A3A;
		margin-right: 6rpx;
	}

	.btn_xz {
		width: 100%;
	}

	.btn_xz>text:nth-child(1) {
		width: 220rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		color: #A68A64;
		border: 1rpx solid #A68A64;
		border-radius: 280rpx;
	}

	.btn_xz>text:nth-child(2) {
		width: 220rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #A68A64;
		font-size: 28rpx;
		color: #ffffff;
		border-radius: 280rpx;
	}

	.card_tips {
		padding: 20rpx 50rpx;
		/* background: pink; */
	}

	.my_code {
		width: 100%;
		/* height: 600rpx; */
		background: #E0DDDA;
		border-radius: 40rpx 40rpx 0 0;
	}

	.my_code>text {
		margin-top: 40rpx;
	}

	.mycode_list {
		display: flex;
		flex-wrap: wrap;
		width: 690rpx;
		max-height: 800rpx;
		background: #F2EFEC;
		border-radius: 16rpx;
		margin: 40rpx 0;
		overflow: auto;
		padding: 20rpx 0;
	}

	.prompt_ntm2 {
		font-size: 36rpx;
		width: 690rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #A68A64;
		border-radius: 40rpx;
		color: #ffffff;
		margin: 30rpx 0;
	}
	.tishi{
		font-size: 28rpx;
		color: #666666 !important;
	}



	/deep/.u-line-progress__line {
		background: linear-gradient(90deg, #D7BA93 0%, #AB8E68 100%);
	}
</style>